import React from 'react';
import { inject, observer } from "mobx-react";
import { Icon , Checkbox , Tooltip , Row ,Col, Tree , Button , Modal , message } from 'antd'
import {  WeaRichText, WeaLocaleProvider} from 'ecCom'
import {toJS} from 'mobx';
import * as Util from "../../../util/Util";
const getLabel = WeaLocaleProvider.getLabel;
@inject("goalDetailStore","goalCommonStore")
@observer
export default class GoalCommet extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            ckeid:'',
            richTextValue:'',
            toolbar : [
                { name: 'document', items: ['Source'] },
                { name: 'paragraph', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'NumberedList', 'BulletedList'] },
                { name: 'styles', items: ['Format', 'Font', 'FontSize'] },
                { name: 'colors', items: ['TextColor'] },
                { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike',] },
                { name: 'insert', items: [ 'Table', 'Smiley']},
            ],
        }
    }

    componentWillMount() {//一些初始化请求

    }

    getBottomBarConfig = (cate) => {
        const {goalCommonStore:{iconArray}} = this.props;
        let btns =[
            {
                name: 'Upload', // 上传组件
                // type: 'list', // 上传组件类型
                show: <span style={{ fontSize: 12 }}>
                    <i className='icon-coms-link' style={{marginRight:5}} title={getLabel('156','附件')} /> {getLabel('156','附件')}</span>, // 使用 antd 图标
                uploadUrl: '/api/doc/upload/uploadFile2Doc?category='+cate , // 上传地址
                category: cate, // 文档目录
                icon:iconArray['fileids']
            },
            {
                name: 'Browser', // 浏览按钮组件
                show: <span style={{ fontSize: 12 }}>
                    <i className='icon-portal-doc' title={getLabel(58,'文档')} />{getLabel(58,'文档')}</span>, // 使用组件库图标
                type: '37', // 浏览按钮类型 文档
                title: getLabel(58,'文档'), // 浏览按钮标题
                icon:iconArray['docids']
            },
            {
                name: 'Browser', // 浏览按钮组件
                show: <span style={{ fontSize: 12 }}>
                    <i className='icon-coms-Workflow-o' title={getLabel(18015,'流程')} /> {getLabel(18015,'流程')}</span>,
                type: '152', // 浏览按钮类型
                title: getLabel(18015,'流程'), // 浏览按钮标题
                icon:iconArray['wfids']
            },
            {
                name: 'Browser',
                show: <span style={{ fontSize: 12 }}>
                    <i className='icon-portal-crm' title={getLabel(136,'客户')} /> {getLabel(136,'客户')}</span>, // 使用组件库图标
                type: '7',
                title: getLabel(136,'客户'),
                icon:iconArray['crmids']
            },
            {
                name: 'Browser',
                show: <span style={{ fontSize: 12 }}>
                    <i className='icon-coms-project' title={getLabel(101,'项目')}/> {getLabel(101,'项目')}</span>,
                type: '8',
                title: getLabel(101,'项目'),
                icon:iconArray['projectids']
            }
        ];
        return btns;
    }

    //发表反馈
    commitComment = () =>{
        if(this.state.richTextValue==""){
            Modal.warning({
                title: getLabel(558,'提示'),
                content: getLabel(508792,'反馈信息不能为空!'),
            });
            return;
        }
        const {goalDetailStore} = this.props;
        let {feedBackData,detailData,detailKey} = goalDetailStore;
        let list = feedBackData.list;
        let obj = {
            content:this.state.richTextValue,
            createdate:Util.getNowDate(),
            createtime:Util.getNowTime(),
            hasdel: false,
            hasnewfb: false,
            hrmid: detailData.userid,
            hrmname: detailData.username,
            lastid:feedBackData.list.length > 0 ? parseInt(feedBackData.list[0].lastid)+1 : 1,
            replyid: "",
            hasdel:true
        }
        goalDetailStore.addGoalFeedBack({content:this.state.richTextValue,goalId:detailKey,doback:()=>{
            this.doCallBack("addfb");
            this.cancelComment()
        }})
    }

    //取消反馈
    cancelComment = () =>{
        this.setState({
            richTextValue:""
        })
    }

    //删除评论
    delFeedback = (fbid, index) =>{
        const { goalDetailStore } = this.props;
        const{detailKey} = goalDetailStore;
        let _this = this;
        Modal.confirm({
            title: getLabel(15172,'系统提示'),
            content: getLabel(127574,'确定删除吗？'),
            onOk() {
                goalDetailStore.delGoalFbInfo({ goalId: detailKey, fbid: fbid, index: index});
            },
            onCancel() { },
        });
    }

    //点击回复按钮触发
    replyFeedback(lastid, hrmid, datetime) {
        this.setState({ ckeid: lastid + "_" + hrmid + "_" + datetime + "_feedback" });
    }

    //循环生成回复信息
    renderReply(replylist) {
        return replylist && replylist.length > 0 && replylist.map((ele, index1) => {
            return (<div className="goal-Feedback-reply-list">
                <div className="reply-basis">
                    <span className="reply-name">@ <a href='javaScript:void(0)' onClick={e => { openhrm(ele.hrmid); window.pointerXY(e) }} title={ele.hrmname} >{ele.hrmname}</a></span>
                    <span className="reply-time">{ele.datetime}</span>
                </div>
                <div className="reply-contnet" dangerouslySetInnerHTML={{ __html: ele.content }} />
            </div>)
        })
    }

    //点击回复按钮触发
    replyFeedback(lastid, hrmid, datetime) {
        this.setState({ ckeid: lastid + "_" + hrmid + "_" + datetime + "_feedback" });
    }

    //提交回复
    submitReply(ckeId, lastid) {
        const { goalDetailStore } = this.props;
        const{detailKey} = goalDetailStore;
        if (this.refs[ckeId].getData().length > 0) {
            let _this = this;
            goalDetailStore.addGoalFeedBack({
                goalId: detailKey, content: this.refs[ckeId].getData(), replyid: lastid, doback: function (type) {
                    _this.setState({ ckeid: '' });
                    _this.doCallBack("addfb");
                }
            });
        } else {
            Modal.warning({
                title: getLabel(15172,'系统提示'),
                content: getLabel(508790,'回复信息不能为空'),
            });
        }
    }
    //取消提交回复
    cancelSubmitReply(ckeId) {
        // this.refs[ckeId].removeEditor();
        this.setState({ ckeid: '' });
    }

    //加载更多
    onMoreFeedbackClick = () =>{
        const {goalDetailStore} = this.props;
        let {feedBackData,detailKey} = goalDetailStore;
        let list = feedBackData.list;
        let params = {
            lastId:list[list.length - 1].lastid,
            pageSize:"5",
            goalId:detailKey
        }

        let count = feedBackData.lastcount;
        if(count <= 0){
            message.success(getLabel(126120,'没有更多数据'));
        }else{
            goalDetailStore.getMoreGoalFeedBack(params);
        }
    }

    //回调函数
    doCallBack = (type) =>{
        if (typeof this.props.doCallBack === "function") {
            this.props.doCallBack(type);
        }
    }

    onStatusChange(val){
        if(val=="ready"){
            const {goalCommonStore,goalDetailStore} = this.props;
            const {isFocusFeedBack,setIsFocusFeedBack} = goalCommonStore;
            goalDetailStore.loading = false;
            if(isFocusFeedBack && this.refs.feedback){
                this.refs.feedback.focus();
            }
        }
    }



    render(){
        const {goalDetailStore} = this.props;
        const {loading,feedBackData,category,detailKey} = goalDetailStore;
        const {ckeid,richTextValue,toolbar} = this.state;
        return(<div>
            <div className="workrelate-goal-out">
                <div className="workrealte-goal-comment">
                    <div className="workrealte-goal-comment-title">
                    </div>
                    <WeaRichText ecId={`${this && this.props && this.props.ecId || ''}_WeaRichText@oqktf2`}
                        ref = "feedback"
                        value={richTextValue}
                        onChange={v => this.setState({richTextValue:v})}
                        ckConfig={{
                            toolbar: toolbar,
                            height: 80,
                            autoGrow_minHeight: 80,
                            autoGrow_maxHeight: 80,
                            startupFocus:false,
                        }}
                        bottomBarConfig={this.getBottomBarConfig(category)}
                        bottomBarRight={{
                            width: 100,
                            Component: [
                                <span className="wea-rich-text-toolbar-bottom-item" style={{ position: "relative" }}>
                                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5sdts5@submit`} className="wea-button-release" style={{ marginRight: '18px' }}  onClick={() => this.commitComment()}>
                                        <span>{getLabel(615,'提交')}</span>
                                    </Button>
                                </span>
                            ]
                        }}
                        onToolsChange={(name, ids, list , type)=>Util.transfStr(name, ids, list , type , detailKey , 1)}
                        onStatusChange={(val)=>this.onStatusChange(val)}
                    >
                    </WeaRichText>
                </div>
            </div>
            {
                    feedBackData.list && feedBackData.list.length > 0 && feedBackData.list.map((elemnet, index) => {
                        return <div> 
                        <div className="task-Feedback">
                                    <div className="task-Feedback-left"><a href='javaScript:void(0)' onClick={e => { openhrm(elemnet.hrmid); window.pointerXY(e) }} title={elemnet.hrmname} ><Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@g3k8yj@${elemnet.lastid}`} type="user" /></a></div>
                                    <div className="task-Feedback-right wea-workrelate-remark-number">
                                        <div className="task-Feedback-right-name"><a href='javaScript:void(0)' onClick={e => { openhrm(elemnet.hrmid); window.pointerXY(e) }} title={elemnet.hrmname} >{elemnet.hrmname}</a><span className="task-Feedback-last-time">{elemnet.datetime}</span>
                                        {elemnet.isnew && <span title={getLabel(84048,'新反馈')} className="feedback-last-span-new">new</span>}
                                        </div>
                                        
                                        <div className="task-Feedback-last">
                                            <span className="task-Feedback-last-button">
                                                {elemnet.hasdel ? <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@wjtmcy@${elemnet.lastid}`} title={getLabel(508783,'删除此评论')}><span className="last-button-i" onClick={() => this.delFeedback(elemnet.lastid, index)} ><i className="icon-coms-delete" />{getLabel(91,'删除')}</span></Tooltip>: ''}
                                                <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@9fssvi@${elemnet.lastid}`} title={getLabel(508781,'回复此评论')}><span className="last-button-i" onClick={() => this.replyFeedback(elemnet.lastid, elemnet.hrmid, elemnet.datetime)}><i className="icon-coms-Advice" />{getLabel(18540,'回复')}</span></Tooltip>
                                            </span>
                                        </div>

                                        <div className="task-Feedback-right-content" dangerouslySetInnerHTML={{ __html: elemnet.content }}></div>
                                        <div className="task-Feedback-reply">
                                            {this.renderReply(elemnet.replylist)}
                                        </div>
                                    </div>
                                </div>
                        {
                            ckeid == elemnet.lastid + '_' + elemnet.hrmid + '_' + elemnet.datetime + '_feedback' ? (
                                <div className="task-Feedback-reply">
                                    <WeaRichText ecId={`${this && this.props && this.props.ecId || ''}_WeaRichText@4l8mh7@${elemnet.lastid}`}
                                        ref={elemnet.lastid + '_' + elemnet.hrmid + '_' + elemnet.datetime + '_feedback'}
                                        ckConfig={{
                                            toolbar: toolbar,
                                            height: 60,
                                            autoGrow_minHeight: 60,
                                            autoGrow_maxHeight: 60,
                                            startupFocus: false,
                                        }}
                                        bottomBarConfig={this.getBottomBarConfig(category)}
                                        bottomBarRight={{
                                            Component: [
                                                <span className="wea-rich-text-toolbar-bottom-item" style={{ position: "relative" }}>
                                                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pyfjm2@submit${elemnet.lastid}`} className="wea-button-release" style={{ marginRight: '18px' }}  onClick={() => this.submitReply(elemnet.lastid + '_' + elemnet.hrmid + '_' + elemnet.datetime + '_feedback', elemnet.lastid)}>
                                                        <span>{getLabel(615,'提交')}</span>
                                                    </Button>
                                                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jqilrk@cancel${elemnet.lastid}`} className="wea-button-release" style={{ marginRight: '18px' }} onClick={() => this.cancelSubmitReply(elemnet.lastid + '_' + elemnet.hrmid + '_' + elemnet.datetime + '_feedback')}>
                                                        <span>{getLabel(201,'取消')}</span>
                                                    </Button>
                                                </span>
                                            ]
                                        }}
                                        onToolsChange={(name, ids, list, type) => Util.transfStr(name, ids, list, type,detailKey,1)}
                                    />
                                </div>) : <div />
                        } 
                        </div>
                    })
                } 
                
            {/* </Spin> */}
            {feedBackData.lastcount > 0 ? <div className="tabs-Feedback-more" onClick={() => this.onMoreFeedbackClick()}>{getLabel(82720,'加载更多')} <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@djdew3`} type="down" /></div> : <div className="tabs-Feedback-split"></div>}     
            
        </div>)
    }
}